// const { convertTypeAcquisitionFromJson } = require("typescript")

download3()
var goodinfo
var shopList = []
function download3() {
    ajax({
        url: "./data/goodsList.json",
        type: "GET",
        callback: function (res) {
            var res = JSON.parse(res)
            // console.log(res)
            rendershop(res)
        }

    })
}
var product_id = Number(location.search.split("=")[1])
function rendershop(data) {
    goodinfo = data.find(item => item.product_id == product_id)

    // console.log( product_id)

    // console.log(goodinfo.images)
    // console.log(goodinfo)
    // var obj=data[i]
    var node = $(`
        <!-- 导航 -->
        <div id = 'J_proHeader' data-name="${goodinfo.name}">
            <div class = 'xm-product-box'>
                <div id = 'J_headNav' class = 'nav-bar'>
                    <div class = 'container J_navSwitch'>
                        <h2 class = 'J_proName'>${goodinfo.name}</h2>
                        <div class = 'con'>
                            <div class = 'left'>
                                <span class = 'separator'>|</span>
                                <a href="#">${goodinfo.title}</a>
                            </div>
                            <div class = 'right'>
                                <a href="#">概述</a>
                                <span class = 'separator'>|</span>
                                <a href="#">参数</a>
                                <span class = 'separator'>|</span>
                                <a href="#">F码通道</a>
                                <span class = 'separator'>|</span>
                                <a href="#">用户评价</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class = 'xm-buyBox' id = 'J_buyBox'>
        <div class = 'box clearfix'>
            <!-- 商品数据 -->
            <div class = 'pro-choose-main container clearfix'>
                <div class = 'pro-view span10'>
                    <!-- img-con fix 设置图片浮动 -->
                    <div id = 'J_img' class = 'img-con' style = 'left: 338px; margin: 0px;'>
                        <div class = 'ui-wrapper' style="max-width: 100%;">
                            <!-- 图片 -->
                            <div class = 'ui-viewport' style="width: 100%; overflow: hidden; position: relative; height: 560px;">
                                <div id = 'J_sliderView' class = 'sliderWrap' style = 'width: auto; position: relative;'>
                                    <img src="${goodinfo.good_img}" class="good_dec">
                                    <div class="mask"></div>
                                </div>
                                
                               
                            </div>
                            <div class="zoom">
                               
                            </div>
                            <div class="goods_item">
                                <div class='good_item_left'></div>
                                <div class='good_carousel'>
                                    <div class='imgCon'>
                                    
                                      ${(
            () => {
                return goodinfo.images.reduce((value, item) => {
                    return value + "<img src=" + item + ">"
                }, "")
            }
        )()
        }
                                       
                                    </div>
                                </div>
                                <div class='good_item_right'></div>    
                            </div>               
                        </div>
                    </div>
                </div>
                <div class = 'pro-info span10'>
                    <!-- 标题 -->
                    <h1 class = 'pro-title J_proName'>
                        <span class = 'img'></span>
                        <span class = 'name'>${goodinfo.name}</span>
                    </h1>
                    <!-- 提示 -->
                    <p class = 'sale-desc' id = 'J_desc'>
                        ${goodinfo.product_desc_ext}
                    </p>
                    <div class = 'loading J_load hide'>
                        <div class = 'loader'></div>
                    </div>
                    <!-- 主体 -->
                    <div class = 'J_main'>
                        <!-- 经营主题 -->
                        <p class = 'aftersale-company' id = 'J_aftersaleCompany' type = '1' desc = 'null'>小米自营</p>
                        <!-- 价格 -->
                        <div class = 'pro-price J_proPrice'>
                            <span class = 'price'>
                                ${goodinfo.price_max}元
                                <del>${goodinfo.market_price_max}元</del>
                            </span>
                            <span class="seckill-notic hide"><em></em><i></i><span><span></span></span></span>
                        </div>
                        <!-- 常态秒杀倒计时 -->
                        <!-- <div class = 'pro-time J_proSeckill'>
                            <div class="pro-time-head">
                                <em class="seckill-icon"></em> 
                                <i>秒杀</i>
                                <span class="time J_seckillTime">距结束 03 时 24 分 46 秒</span>
                           </div>
                            <div class = 'pro-time-con'>
                                <span class = 'pro-time-price'>
                                    ￥
                                    <em class = 'J_seckillPrice'>${goodinfo.price_min}</em>
                                    <del>
                                        ￥
                                        <em class = 'J_seckillPriceDel'>${goodinfo.market_price_min}</em>
                                    </del>
                                </span>
                            </div>
                        </div> -->
                            <!-- 已经选择产品 -->
                            <div class = 'pro-list' id = 'J_proList'>
                                <ul>
                                    <li>${goodinfo.name} ${goodinfo.value}  
                                        <del>${goodinfo.market_price_min}元</del>  
                                        <span>  ${goodinfo.price_min} 元 </span> 
                                    </li>
                                    <li class="totlePrice" data-name="seckill">   
                                        秒杀价   ：${goodinfo.price_min}元  
                                    </li>
                                </ul>
                            </div>

                            <!-- <div class="pro_addres">
                                <div class="addres-con">
                                    <div class="good-add">
                                        <span>北京</span>
                                        <span>北京市</span>
                                        <span>昌平区</span>
                                        <span>清河街道</span>
                                         <a>修改</a>
                                    </div>
                                   
                                    <div class="had">
                                        <span>有现货</span>
                                    </div>
                                </div>
                            </div> -->

                            <div class = 'J_addressWrap address-wrap'>
                                <div class = 'user-default-address' id = 'J_userDefaultAddress'>
                                    <i class = 'iconfont iconfont-location'></i>
                                    <div>
                                        <div class = 'address-info'>
                                            <span class="item">山东</span>
                                            <span class="item">济南市</span>
                                            <span class="item">历下区</span>
                                            <span class="item">趵突泉街道</span>
                                        </div>
                                        <span class="switch-choose-regions" id="J_switchChooseRegions"> 修改 </span>
                                    </div>
                                    <div class="product-status active" id="J_productStatus"> 
                                        <span class="sale">有现货</span> 
                                    </div>
                                </div>
                            </div>

                            <div class="good-verson good-box">
                                <p>选择版本</p>
                                <ul class="good-childs">
                                  <li><a>6GB+128GB</a></li>
                                  <li><a>8GB+128GB</a></li>
                                  <li><a>8GB+500GB</a></li>
                                </ul>
                            </div>

                            <div class="good-color  good-box">
                                <p>选择颜色</p>
                                <ul class="good-childs">
                                  <li><a>黑色</a></li>
                                  <li><a>白色</a></li>
                                  <li><a>渐变</a></li>
                                </ul>
                            </div>

                            <div class="good-server">


                                <div class = 'list-wrap' id = 'J_list'>
                                    <!-- 小米意外保护 -->
                                    <div class = 'pro-choose list-choose list-choose-small J_service' data-index="0" data-multi="false">
                                        <div class = 'step-title'>
                                            选择小米提供的意外保护
                                            <a href="https://api.jr.mi.com/activity/accidentIns/?from=mishop&insuranceSku=24802" target="_blank">了解意外保护 ></a> 
                                        </div>
                                        <ul>
                                            <li class="clearfix" data-oriprice="179.00" data-price="179.00" data-name="意外保障服务" data-bargain_id="2192100029" data-id="2192100029" data-source="common"> 
                                                <i class="iconfont icon-checkbox">
                                                <input type="checkbox">
                                                </i> 
                                                <img src="//i1.mifile.cn/a1/pms_1558617128.57794462.png?width=50&amp;height=50"> 
                                                <div> 
                                                    <span class="name"> 意外保障服务 </span> 
                                                    <p class="desc">手机意外碎屏/进水/碾压等损坏</p>  
                                                    <p class="agreement"> 
                                                        <i class="iconfont icon-checkbox J_read">
                                                        <input type="checkbox">
                                                        </i> 我已阅读  
                                                        <a href="https://api.jr.mi.com/insurance/document/phone_accidentIns.html?insuranceSku=24802&amp;couponFrom=rule" target="_blank">
                                                            服务条款
                                                            <span>|</span>
                                                        </a>  
                                                        <a href="https://api.jr.mi.com/insurance/document/phone_accidentIns.html?insuranceSku=24802&amp;couponFrom=question" target="_blank">
                                                            常见问题
                                                        </a>  
                                                    </p>  
                                                    <span class="price">  179元  </span> 
                                                </div> 
                                            </li>
                                            <li class="clearfix" data-oriprice="99.00" data-price="99.00" data-name="碎屏保障服务" data-bargain_id="2192100030" data-id="2192100030" data-source="common"> 
                                                <i class="iconfont icon-checkbox">
                                                <input type="checkbox">
                                                </i> 
                                                <img src="//i1.mifile.cn/a1/pms_1558617981.89919461.png?width=50&amp;height=50"> 
                                                <div> 
                                                    <span class="name"> 碎屏保障服务    </span> 
                                                    <p class="desc">手机意外碎屏</p>  
                                                    <p class="agreement"> 
                                                        <i class="iconfont icon-checkbox J_read"><input type="checkbox"></i> 
                                                        我已阅读  
                                                        <a href="https://api.jr.mi.com/insurance/document/phone_accidentIns.html?insuranceSku=24803&amp;couponFrom=rule" target="_blank">
                                                            服务条款
                                                            <span>|</span>
                                                        </a>  
                                                        <a href="https://api.jr.mi.com/insurance/document/phone_accidentIns.html?insuranceSku=24803&amp;couponFrom=question" target="_blank">
                                                            常见问题
                                                        </a>  
                                                    </p>  
                                                    <span class="price">  99元  </span> 
                                                </div> 
                                            </li>
                                        </ul>
                                    </div>
                                    <!-- 小米延长保修 -->
                                    <div class="pro-choose list-choose list-choose-small J_service" data-index="1" data-multi="false">
                                        <div class = 'step-title'>
                                            选择小米提供的延长保修 
                                            <a href="https://api.jr.mi.com/activity/accidentIns/?from=mishop&insuranceSku=24806" target="_blank">了解延长保修 ></a>
                                        </div>
                                        <ul>
                                            <li class="clearfix" data-oriprice="49.00" data-price="34.3" data-name="延长保修服务" data-bargain_id="2192100031" data-id="2192100031" data-source="common"> 
                                                <i class="iconfont icon-checkbox"><input type="checkbox"></i> 
                                                <img src="//i1.mifile.cn/a1/pms_1558618318.5427285.png?width=50&amp;height=50"> 
                                                <div> <span class="name"> 延长保修服务  <em>已省14.7元</em>  </span> 
                                                    <p class="desc">厂保延一年，性能故障免费维修</p>  
                                                    <p class="agreement"> 
                                                        <i class="iconfont icon-checkbox J_read"><input type="checkbox"></i> 
                                                        我已阅读  
                                                        <a href="https://api.jr.mi.com/insurance/document/phone_accidentIns.html?insuranceSku=24806&amp;couponFrom=rule" target="_blank">服务条款<span>|</span></a>  
                                                        <a href="https://api.jr.mi.com/insurance/document/phone_accidentIns.html?insuranceSku=24806&amp;couponFrom=question" target="_blank">常见问题</a>  
                                                    </p>  
                                                    <span class="price">  34.3元 
                                                        <del>49元</del>  
                                                    </span> 
                                                </div> 
                                            </li>
                                            
                                        </ul>
                                    </div>
                                   
                                    <!-- 购买按钮 -->
                                    <!-- <ul class="btn-wrap clearfix" id="J_buyBtnBox">     
                                        <li>  
                                            <a data-href="//order.mi.com/site/login?redirectUrl=https://item.mi.com/product/10000150.html" class="btn btn-primary btn-biglarge J_login">登录后购买</a>  
                                        </li>   
                                        <li>  
                                            <a href="//order.mi.com/site/login?redirectUrl=https://item.mi.com/product/10000150.html" class="btn-gray btn-like btn-biglarge"> 
                                                <i class="iconfont default"></i>喜欢 
                                            </a>  
                                        </li>
                                    </ul> -->
                                   
            
                                </div>

                            </div>
                            <!-- 购买按钮 -->
                            <ul class="btn-wrap clearfix" id="J_buyBtnBox">     
                                <li>  
                                    <a  href="./success.html" class="btn btn-primary btn-biglarge J_login" id = "${goodinfo.product_id}">加入购物车</a>  
                                </li>   
                                <li>  
                                    <a class="btn-gray btn-like btn-biglarge" href="shopcar.html" target="_target"> 
                                        <i class="iconfont default"></i>查看购物车 
                                    </a>  
                                </li>
                            </ul>
                            <div class="pro-policy" id="J_policy">   
                                <a href="javascript:void(0);" title="">  
                                    <span class="support">  
                                        <i class="iconfont"></i>  
                                        <em>小米自营</em> 
                                    </span> 
                                </a>   
                                <a href="javascript:void(0);" title="由小米发货">  
                                    <span class="support">  
                                        <i class="iconfont"></i>  
                                        <em>小米发货</em> 
                                    </span> 
                                </a>   
                                <a href="javascript:void(0);" title=""> 
                                    <span class="support">  
                                        <i class="iconfont"></i>  
                                        <em>7天无理由退货</em> 
                                    </span> 
                                </a>   
                                <a href="javascript:void(0);" title="由小米发货的商品，单笔满150元免运费;
                                由第三方商家发货的商品，免运费;
                                特殊商品需要单独收取运费，具体以实际结算金额为准；优惠券等不能抵扣运费金额;如需无理由退货，用户将承担该商品的退货物流费用;">  
                                    <span class="support">  
                                        <i class="iconfont"></i>  
                                        <em>运费说明</em> 
                                    </span> 
                                </a> 
                            </div>

                        </div>
                    </div>
                </div>
            </div>
           
            

        `)
    node.appendTo('#app div .header')
}



setTimeout(function () {
    var imgCon = document.querySelector(".good_carousel")
    var good_img = document.querySelector(".good_dec")
    var prev;

    // console.log(imgCon)
    imgCon.addEventListener("mouseover", function (e) {
        if (e.target.nodeName !== "IMG") return
        if (prev) prev.style.borderColor = "transparent"
        prev = e.target
        prev.style.borderColor = "#e53e41"
        // console.log(prev.src)
        good_img.src = prev.src
    })


    var goods
    var shop_num = {}, numList = [], number = 0
    var buy = document.querySelector(".btn-biglarge")

    if (localStorage.getItem("shopList")) {
        goods = JSON.parse(localStorage.getItem("shopList"))
        for (var i = 0; i < goods.length; i++) {
            shopList.push(goods[i])
        }
    }


    buy.onclick = function (e) {
      goodinfo['num']=1
    //   console.log(goodinfo)
        if (shopList.length === 0) {
            // num()
            shopList.push(goodinfo);
            localStorage.setItem("shopList", JSON.stringify(shopList));
        }
        else {
            shopList = JSON.parse(localStorage.getItem("shopList"));
            // for (var i = 0; i < shopList.length; i++) {
            var a = shopList.some(function (item, index) {
                return item.product_id === goodinfo.product_id
            })
            if (!a) {
                // num()
                shopList.push(goodinfo)
                localStorage.setItem("shopList", JSON.stringify(shopList));
                console.log("dsds")
            } else {
                // numList = JSON.parse(localStorage.getItem("goods_num"));
                // // console.log(numList)
                // for (var i = 0; i < numList.length; i++) {
                //     if (numList[i].pro_id === goodinfo.product_id) {
                //         let n = numList[i].num++
                //         localStorage.setItem("goods_num", JSON.stringify(numList));
                //         console.log(n)
                //     }
                // }
                shopList= JSON.parse(localStorage.getItem("shopList"))
                for(var i = 0; i < shopList.length; i++){
                    if (shopList[i].product_id === goodinfo.product_id) {
                             shopList[i]['num']+=1;
                            localStorage.setItem("shopList", JSON.stringify(shopList));
                          
                        }
                }
            }
        }

    }

}, 200)






